<template>
  <div class="cartbox">
    <Tips/>

    <!-- disabled=true禁用状态(静态页面的时候,不发请求修改result数组,disable为true就会禁用,但如果点击复选框发送请求修改result,虽然disabled=true但还是会选中,因为请求后修改了result数组,所以要想真正的禁用还要在点击复选框代码中设置)isEditClicked=true点击了编辑就禁用 -->
    <van-checkbox-group :disabled="isEditClicked" v-model="result" v-if="cartList.length > 0">
      <van-checkbox @click="goodsClick(item)" class="chx" :name="item.product_id" v-for="item in cartList" :key="item.id">
        <van-swipe-cell>
          <!-- 商品卡片 -->
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 向右滑动删除 -->
          <template #right>
            <van-button square text="删除" @click="delGoodsFn(item.product_id)" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 步进器 -->
        <van-stepper min="1" max="100" v-show="isEditClicked" v-model="item.number" @change="stepChange(item)" />
      </van-checkbox>
    </van-checkbox-group>

    <!-- 购物车为空时展示 -->
    <div class="empty" v-else>
      <img src="../assets/custom-empty-image.jpg" alt="">
      <h3>购物车竟然是空的</h3>
      <p>再忙,也要记得买点什么犒赏自己哟</p>
    </div>

    <!-- 底部结算区域 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="结算" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" :disabled="isEditClicked || cartTotal.goodsCount == 0 ? true : false">全选</van-checkbox>
      <template #tip v-if="cartList.length > 0">
        累计共<span>{{cartTotal.checkedGoodsCount}}</span>件商品，可点击<van-button type="default" size="small" round @click="isEditClicked=!isEditClicked">{{isEditClicked ? '完成编辑' : '编辑'}}</van-button>按钮进行商品数量修改
      </template>
    </van-submit-bar>

  </div>
</template>

<script>
import Tips from '../components/Tips.vue'
import { GetCartData, GoodsChecked, StepNum, DelGoods } from '../request/api'
export default {
  name: 'Cart',
  components: {
    Tips
  },
  data() {
    return {
      // 复选框数组
      // cartList的数组项如果checked为1,就把product_id存进result中
      result: [],
      // 商品列表数组
      cartList: [],
      // 商品总信息
      cartTotal: {
        checkedGoodsAmount: 0,
        checkedGoodsCount: 0,
      },
      // 编辑按钮是否被点击,true代表点击了,false表示还未被点击
      isEditClicked: false
    }
  },
  computed: {
    // 全选按钮
    checkedAll: {
      get() {
          return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount && this.cartTotal.goodsCount != 0
      },
      set(val) {
        if (this.isEditClicked) {
          return
        } else {
          // 拿到cartList中的每一项的product_id
          let arr = []
          this.cartList.map(val => {
            arr.push(val.product_id)
          })
          GoodsChecked({
            // isChecked代表即将要变成的选中状态
            isChecked: val ? 1 : 0,
            productIds: arr.join()
            }).then(res => {
            if (res.errno == 0) {
              this.totalFn(res.data)
            }
          })
        }
      }
    }
  },
  methods: {
    // 商品删除
    delGoodsFn(product_id) {
      this.$dialog
        .confirm({
          title: '删除商品',
          message: '确定删除此商品吗'
        }).then(() => {
          DelGoods({
            productIds: product_id.toString()
          }).then(res => {
            if (res.errno == 0) {
              this.totalFn(res.data)
            }
          })
        }).catch(err => err)
    },
    // 步进器事件
    stepChange(item) {
      StepNum({
        number: item.number,
        goodsId: item.goods_id,
        id: item.id,
        productId: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          this.totalFn(res.data)
        }
      })
    },
    // 商品卡片的点击事件
    goodsClick(item) {
      if (this.isEditClicked) {
        return
      } else {
        GoodsChecked({
          // isChecked代表即将要变成的选中状态
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id.toString()
        }).then(res => {
          if (res.errno == 0) {
            this.totalFn(res.data)
          }
        })
      }
    },
    onSubmit() {
      if (this.cartList.length == 0 || this.cartTotal.checkedGoodsCount == 0) {
        this.$toast.fail('您还未选择商品')
      } else {
        this.$toast('您所在地区尚不持支购买')
      }
    },
    onClickEditAddress() {

    },
    // 公共重新渲染数据方法
    totalFn(data) {
      let { cartList, cartTotal } = data
      this.cartList = cartList
      this.cartTotal = cartTotal
      // 清空result数组
      this.result = []
      // 判断checked == 1,就把product_id加入到result数组中
      this.cartList.map(val => {
        if (val.checked == 1) {
          this.result.push(val.product_id)
        }
      })
    }
  },
  created() {
    // 请求购物车列表数据
    GetCartData().then(res => {
      if (res.errno == 0) {
        this.totalFn(res.data)
      }
    })
  }
}
</script>

<style lang="less" scoped>
.cartbox {
  padding-bottom: 148px;
}
.van-submit-bar {
  margin-bottom: 50px;
  .van-submit-bar__tip {
    display: flex;
    align-items: center;
  }
}
.chx {
  padding: 10px 4%;
  background: #fff;
  border-bottom: 1px solid #ccc;
  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-card__price {
  color: darkred;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
.custom-image {
  margin-top: 20vh;
}

.empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 300px;
  overflow: hidden;
  text-align: center;
  img {
    width: 90%;
    border-radius: 50%;
  }
  h3 {
    margin: 10px 0;
  }
}

.van-card__title {
  font-size: .16rem;
  width: 1.9rem;
  height: .2rem;
  line-height: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>